<template>
  <div class="header-container-screen">
    <div class="header-top">
      <div class="title">能源可视化数据展板</div>
      <div class="operation">
        <div class="time-view">
          <span class="time-view-item1">{{ currentDatetime.date }}</span>
          <span class="time-view-item2">{{ currentDatetime.year }}</span>
        </div>
        <a-dropdown>
          <a-icon type="appstore" style="color:#fff;font-size: 25px"></a-icon>
          <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
            <a-menu-item key="1">
              <span @click="gotoMain">
                <a-icon type="file-text" />
                <span> 数据管理</span>
              </span>
            </a-menu-item>
            <!-- <a-menu-item key="3">
               <span @click="openUrl">
                <a-icon type="slack"/>
                <span> 区域数据</span>
              </span>
            </a-menu-item> -->
            <a-menu-item key="4">
               <span @click="logout">
                <a-icon type="logout"/>
                <span> 退出系统</span>
              </span>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </div>
    <!-- 标题下边导航部分-->
    <div class="header-bottom">
      <div class="left-arrow"  @click="scrollLeft"><div class="icon-div"><a-icon type="left" class="icon-item"></a-icon></div></div>
      <div class="nav-content" ref="headerMenu">
        <template v-for="(item,index) in itemList" >
          <div :class="['nav-item',item.selected?'nav-selected':'',item.name.length>4?'nav-long':'']"  @click="navClick(item)">
            <div class="name">{{item.name}}</div>
            <div class="light" v-show="item.selected"></div>
          </div>
          <div v-if="index+1!==16" class="split-line"></div>
        </template>
      </div>
      <div class="right-arrow" @click="scrollRight"><div class="icon-div"><a-icon type="right" class="icon-item"></a-icon></div></div>
    </div>
  </div>
</template>

<script>
import {mapActions} from "vuex";
import { getAction } from '@/api/manage'
export default {
name: "ScreenHeader",
  data(){
    return{
      itemList:[
        // {
        //   name:'视频监控',
        //   type:'CAMERA',
        //   enable:true,
        //   selected:false,
        // },
        // {
        //   name:'门禁报警监控',
        //   type:'ACCESS',
        //   enable:true,
        //   selected:false,
        // },
        // {
        //   name:'周界报警监控',
        //   type:'PERIMETER',
        //   enable:true,
        //   selected:false,
        // },
        // {
        //   name:'消防报警监控',
        //   type:'FIRE',
        //   enable:true,
        //   selected:false,
        // },
        // {
        //   name:'拾音报警监控',
        //   type:'SOUND',
        //   enable:true,
        //   selected:false,
        // },
        // {
        //   name:'红外报警监控',
        //   type:'INFRARED',
        //   enable:true,
        //   selected:false,
        // },
        // {
        //   name:'电子巡更',
        //   type:'PATROL',
        //   enable:true,
        //   selected:false,
        // },
        // {
        //   name:'安全风险管控',
        //   type:'safetyRisk',
        //   enable:false,
        //   selected:false,
        // },
        // {
        //   name:'人员安全监控',
        //   type:'PersonnelSafety',
        //   enable:false,
        //   selected:false,
        // },
        // {
        //   name:'特殊作业监控',
        //   type:'SpecialOperation',
        //   enable:false,
        //   selected:false,
        // },
        // {
        //   name:'管线管廊',
        //   type:'PipelineGallery',
        //   enable:false,
        //   selected:false,
        // },
        // {
        //   name:'GDS监控',
        //   type:'GDS',
        //   enable:false,
        //   selected:false,
        // },
        // {
        //   name:'DCS报警监控',
        //   type:'DCS',
        //   enable:false,
        //   selected:false,
        // },
        // {
        //   name:'SIS报警监控',
        //   type:'SIS',
        //   enable:false,
        //   selected:false,
        // },
        // {
        //   name:'AI分析预警',
        //   type:'AI',
        //   enable:false,
        //   selected:false,
        // },
        // {
        //   name: '应急管理',
        //   type: 'ContingencyManagement',
        //   enable: false,
        //   selected: false
        // }
      ],
      user: {},
      url: '/rizhao/index',
      getTime: '/consumptionElectricity/consumptionElectricity/getScreenHeaderTime',
      currentDatetime: {
        year: '',//年月日
        date: ''//时分秒
      },//右上角年月日时分秒
      timestamp: '',//接口获取的时间戳
      timeInterval: null
    }
  },
  mounted() {

  },
  created() {
    //获取后端时间戳 动态显示时间
    this.getCurrentTime()
  },
  beforeDestroy() {
    clearInterval(this.timeInterval)
    this.timeInterval = null
  },
  methods: {
    scrollLeft() {
      this.$refs.headerMenu.scrollLeft -= 1000
    },
    scrollRight() {
      this.$refs.headerMenu.scrollLeft += 1000
    },
    ...mapActions(['Logout']),
    getCurrentTime() {
      getAction(this.getTime, {}).then((res) => {
        if (res.success) {
          this.timestamp = res.result
          if (this.timestamp != null) {
            this.formDataTime(this.timestamp)
            //定时计算右上角显示时间
            this.timeInterval = setInterval(() => {
              this.timestamp += 1000
              this.formDataTime(this.timestamp)
            }, 1000)
          } else {
            this.currentDatetime = {
              year: '',
              date: ''
            }
          }
        }
      })
    },
    formDataTime(timestamp) {
      let date = new Date(timestamp)//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '年'
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月'
      let D = this.zeroPad(date.getDate())+ '日'
      let h = this.zeroPad(date.getHours()) + ':'
      let m = this.zeroPad(date.getMinutes()) + ':'
      let s = this.zeroPad(date.getSeconds());
      this.currentDatetime.year = Y + M + D
      this.currentDatetime.date = h + m + s
    },
    // 补0
    zeroPad(n) {
      return n < 10 ? '0' + n : n
    },
    gotoMain() {
      this.$router.push({ name: 'dashboard' })
    },
    openUrl() {
      window.open(this.url)
    },
    logout() {
      const that = this
      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗 ?',
        onOk() {
          return that.Logout({}).then(() => {
            window.location.href = "/";
          }).catch(err => {
            that.$message.error({
              title: '错误',
              description: err.message
            })
          })
        },
        onCancel() {
        },
      });
    },
    // 点击顶部nav 显示隐藏对应3D模型
    navClick(item){
      // if(item.enable){
      //   item.selected=!item.selected
      //   console.log(item.name,item.selected)
      //   this.$emit('navClickCallback',item)
      // }
    },
  }
}
</script>

<style scoped lang="less">
@main-color:#002359;
.header-container-screen{
  width: 100%;
  height: 11%;
  //background: #030B17;
  background: @main-color;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  //background: linear-gradient(0deg, rgba(4,14,25,0) 0%, #040E19 100%);

  .header-top{
    width: 100%;
    height: 57%;
    position: relative;



    .operation {
      position: absolute;
      top: 0;
      right: 20px;
      width: auto;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;

      .time-view {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: auto;
        height: 100%;
        margin-right: 16px;

        span {
          font-size: 15px;
          color: #E6F7FF;
          font-weight: 500;
          font-family: "PingFangSC-Medium";
        }

        .time-view-item1 {
          font-size: 17px;
          font-weight: 600;
        }
      }

      .operation-container{
        padding-left: 20px;
        i{
          font-size: 28px;
          cursor: pointer;
          color: #fff;
        }
        i:hover{
          color: #00c0ff;
        }
      }
    }
  }

  @media screen and (min-width: 1000px){
    .title{
      width: 100%;
      height: 100%;
      background-image: url("/img/border/header.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      // div{
        font-size: 35px;
        font-weight: bold;
        text-shadow: 0 1px 4px #00c0ff;
        width: 100%;
        height: 100%;
        text-align: center;
      // }
    }
  }
  @media screen and (max-width: 1000px){
    .title{
      width: 100%;
      height: 100%;
      background-image: url("/img/border/header.png");
      background-size: 100% 50%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      div{
        font-size: 25px;
        font-weight: bold;
        text-shadow: 0 1px 4px #00c0ff;
        width: 100%;
        height: 100%;
        text-align: center;
      }
    }
  }

//<!-- 宽度大于 1700px 的屏幕使用该样式 -->
  @media screen and (min-width: 1700px) {
    .header-bottom{
      width: calc(100% - 30px);
      margin-bottom: 2px;
      height: 43%;
      border: 1px solid #1389d9;
      box-shadow:inset  0 0 12px 0 rgba(0,39,144,1);
      border-radius: 10px;
      padding: 0 5px;
      box-sizing: border-box;
      position: relative;

      .left-arrow,
      .right-arrow{
        display: none;
      }
    }
    .nav-content{
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      overflow-y: hidden;
      overflow-x: auto;

      .nav-item{
        width: 4.8%;
        min-width: 100px;
        height: 70%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        background-color: transparent;
        color: #BCFAFB;
        cursor: pointer;
        font-size: 15px;
        position: relative;
        transition: all 0.1s ease-in;
      }
      .nav-item:hover{
        color: #46E2FF;
      }
      .name{
        word-break: keep-all;
      }
      .nav-long{
        width: 6%;
      }
      .nav-disabled{
        color: #ccc;
      }
      .split-line{
        width: 1px;
        height: 80%;
        background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(70,226,255,0.97) 50%, rgba(255,255,255,0) 100%);
      }
      .selected-split-line{
        background:transparent;
      }
      .nav-selected{
        color: #46E2FF;
        font-weight: 500;
        //background: rgba(5,16,36,0.67);
        background-color: @main-color;
        border: 1px solid #32E1E6;
        border-radius: 5px;
        box-shadow: inset 0 0 6px 0 #32e1e6;
      }
      .light{
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(56,255,255,0.29) 26%, rgba(56,255,255,0.98) 50%, rgba(56,255,255,0.31) 75%, rgba(0,0,0,0) 100%);
        border-radius: 50%;
        position: absolute;
        bottom: -9px;
        left: 0;
      }
    }
  }

  //<!-- 宽度小于等于 1700px 的屏幕使用该样式 -->
  @media screen and (max-width: 1700px) {
    .header-bottom{
      width: calc(100% - 30px);
      margin-bottom: 2px;
      height: 43%;
      border: 1px solid #1389d9;
      box-shadow:inset  0 0 12px 0 rgba(0,39,144,1);
      border-radius: 10px;
      padding: 0;
      box-sizing: border-box;
      position: relative;
      display: flex;

      .left-arrow{
        width: 25px;
        height: 100%;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        display: flex;
        align-content: center;
        justify-content: center;
      }
      .nav-content{
        width: calc(100% - 50px);
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        overflow-y: hidden;
        overflow-x: auto;
        scroll-behavior: smooth;

        .nav-item{
          width: 4.8%;
          min-width: 110px;
          height: 70%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          background-color: transparent;
          color: #BCFAFB;
          cursor: pointer;
          font-size: 15px;
          position: relative;
          margin-right: 8px;
          scroll-behavior: smooth;
          transition: all 0.1s ease-in;
        }
        .nav-item:hover{
          color: #46E2FF;
        }
        .name{
          word-break: keep-all;
        }
        .nav-long{
          width: 6%;
        }
        .nav-disabled{
          color: #ccc;
        }
        .split-line{
          width: 1px;
          height: 80%;
          background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(70,226,255,0.97) 50%, rgba(255,255,255,0) 100%);
          display: none;
        }
        .selected-split-line{
          background:transparent;
          display: none;
        }
        .nav-selected{
          color: #46E2FF;
          font-weight: 500;
          //background: rgba(5,16,36,0.67);
          background-color: @main-color;
          border: 1px solid #32E1E6;
          border-radius: 5px;
          box-shadow: inset 0 0 6px 0 #32e1e6;
        }
        .light{
          width: 100%;
          height: 4px;
          background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(56,255,255,0.29) 26%, rgba(56,255,255,0.98) 50%, rgba(56,255,255,0.31) 75%, rgba(0,0,0,0) 100%);
          border-radius: 50%;
          position: absolute;
          bottom: -9px;
          left: 0;
        }
      }
      .right-arrow{
        width: 25px;
        height: 100%;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .icon-div{
        width: 15px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;

        .icon-item{
          cursor: pointer;
          color: #fff;
          font-size: 15px;
          width: 15px;
          height: 15px;
        }
        .icon-item:hover{
          color: #1389d9;
        }
      }

    }

  }

  /* 隐藏滚动条 */
  .nav-content::-webkit-scrollbar {
    display: none;
  }
}
</style>